常用套件整理 - Visual Studio Code

TLDR

• 透過 Visual Studio Keymap 可降低從 Visual Studio 轉換至 VS Code 的操作成本。
• 使用 Error Lens 能即時在行尾顯示診斷訊息，顯著提升除錯效率。
• 前端開發建議搭配 Vue - Official、ESLint 與 Prettier 建立標準化開發環境。
• Playwright Test for VSCode 是執行 E2E 測試與錄製腳本的必備工具。
• 容器化開發應優先選擇 Container Tools 取代舊版 Docker 套件，並利用 Dev Containers 統一團隊開發環境。
• WSL 套件是 Windows 開發者在 Linux 環境下執行程式碼的最佳橋樑。

一般與外觀 (General & Appearance)

此類套件旨在優化編輯器基礎體驗與跨平台一致性。

• Chinese (Traditional) Language Pack for Visual Studio Code：提供繁體中文介面。
• Visual Studio Keymap：同步 Visual Studio 快捷鍵設定。
• Material Icon Theme：提供高辨識度的檔案圖示。
• EditorConfig for VS Code：確保跨編輯器的程式碼風格一致性。

開發體驗 (Developer Experience)

當開發者需要更直觀的錯誤提示與拼字檢查時，可安裝以下套件：

• Error Lens：直接在程式碼行尾顯示錯誤與警告訊息。
• Code Spell Checker：檢查程式碼拼字錯誤。

Markdown 撰寫 (Markdown Editing)

針對文件撰寫需求，建議整合以下工具以提升效率：

• Markdown All in One：提供目錄生成與快捷鍵支援。
• Markdown Preview Enhanced：支援數學公式、Mermaid 圖表與多格式匯出。
• markdownlint：即時檢查 Markdown 語法規範。

前端開發 (Frontend Development)

在進行 Vue 或 TypeScript 專案開發時，以下套件能提供完整的語法支援與自動化格式：

• Vue - Official：Vue 3 官方開發工具，提供 IntelliSense 與 TypeScript 支援。
• ESLint：即時偵測語法與風格問題。
• Prettier - Code formatter：自動化程式碼格式化。
• Auto Close Tag：自動閉合 HTML/XML 標籤。
• Auto Rename Tag：同步修改標籤名稱。
• Pretty TypeScript Errors：格式化冗長的 TypeScript 錯誤訊息。

測試 (Testing)

當需要進行 E2E 測試時，建議使用：

• Playwright Test for VSCode：支援測試執行、偵錯與錄製功能。

容器與 DevOps (Containers & DevOps)

針對容器化開發與環境隔離，建議採用以下配置：

• Container Tools：整合 Docker 與 Podman 功能，建議取代舊版 Docker 套件。
• Docker DX：提供 Dockerfile 與 Compose 檔案的進階語法檢查與除錯。
• Dev Containers：將容器作為開發環境，確保團隊工具鏈一致。
• WSL：在 Windows 上透過 VS Code 操作 Linux 環境。

AI 輔助 (AI Assistance)

• GitHub Copilot：程式碼自動補全。
• GitHub Copilot Chat：提供程式碼解釋與重構建議。

其他基於 VS Code 的編輯器工具

• Antigravity Cockpit：用於查詢 Antigravity 模型使用額度。

異動歷程

1. 2026-01-15

   • 初版文件建立。
2. 2026-03-25

   • 新增 Markdown Preview Enhanced 與 markdownlint 套件，移除 Markdown Preview Mermaid Support（功能已由前者涵蓋），並將 Markdown 相關套件獨立為「Markdown 撰寫」小節。